<template>
  <div class="l-echart-swiper"
       :style="styleSizeName"
       ref="main">
    <el-carousel :type="type"
                 :indicator-position="indicator2"
                 :interval="interval"
                 :height="heightSwiper">
      <el-carousel-item v-for="(item, index) in dataHandle"
                        :key="index"
                        @click.native="handleClick(item,index)">
        <img :src="item.value"
             draggable="false"
             :style="styleName" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import init from "../mixins/common";
export default {
    mixins:[init],
    data () {
        return {
            dataHandle: []
        };
    },
    computed: {
        styleName () {
        return {
            opacity: this.opacity
        };
        },
        indicator2 () {
            return this.opacity.indicator || "none";
        },
        opacity () {
            return (this.option.opacity || 100) * 0.01;
        },
        type () {
            return this.option.type || "";
        },
        interval () {
            return this.option.interval - 0 || 5000;
        },
        heightSwiper () {
            return this.height + ''
        }
    },
    watch: {
        fresh:{
            handler(){
                if (this.dataType === 2) {
                    let data = []
                    if (this.dataChart.length> 0) {
                        this.dataChart.map(t => {
                            data.push({'value' : t[this.valueKey]})
                        })
                    }
                    this.dataHandle = [...data]
                } else {
                    this.dataHandle = this.dataChart
                }
            },
        },
    },
    created () { },
    mounted () { },
    methods: {
        handleClick (item, index) {
            this.clickFormatter && this.clickFormatter({
                type: index,
                value: item,
                data: this.dataHandle
            },this.getItemRefs());
        }
    },
    props: {
        option: {
        type: Object,
        default: () => {
            return {};
        }
        }
    }
};
</script>


